<template>
  <FullscreenDataScreen :fullscreen="fullscreen">
    <div class="performance-screen">
      <div class="screen-header">
        <div class="header-left">
          <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" />
          </div>
          <div class="title">
            电信客户流失预警系统 - 绩效监控大屏
            <!-- 在标题右侧放置返回按钮占位元素，仅在全屏模式下显示 -->
            <div v-if="fullscreen" class="back-button-placeholder"></div>
          </div>
        </div>
        <div class="header-center">
          <div class="time">{{ currentTime }}</div>
        </div>
        <div class="header-right">
          <!-- 添加全屏切换按钮 -->
          <el-button v-if="!fullscreen" size="small" type="primary" @click="enterFullscreen">
            <el-icon><FullScreen /></el-icon> 全屏
          </el-button>
        </div>
      </div>

      <div class="screen-content">
        <!-- 使用top-section包裹顶部内容 -->
        <div class="top-section">
          <!-- 顶部KPI面板 -->
          <div class="top-kpi-section">
            <div class="kpi-item" v-for="(item, index) in kpiData" :key="index">
              <div class="kpi-icon" :style="{ background: item.color }">
                <i :class="item.icon"></i>
              </div>
              <div class="kpi-content">
                <div class="kpi-title">{{ item.title }}</div>
                <div class="kpi-value">{{ item.value }}</div>
                <div class="kpi-trend" :class="item.trend > 0 ? 'up' : 'down'">
                  <span>{{ item.trend > 0 ? '↑' : '↓' }} {{ Math.abs(item.trend) }}%</span>
                  <span class="trend-text">{{ item.trend > 0 ? '同比增长' : '同比下降' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="main-content">
            <div class="left-section">
              <!-- 客户挽回率趋势 -->
              <div class="panel-item">
                <div class="panel-header">
                  <div class="panel-title">客户挽回率月度趋势</div>
                </div>
                <div class="panel-content">
                  <div class="chart-container" ref="retentionChart"></div>
                </div>
              </div>
              
              <!-- 部门绩效对比 -->
              <div class="panel-item">
                <div class="panel-header">
                  <div class="panel-title">部门绩效对比</div>
                </div>
                <div class="panel-content">
                  <div class="chart-container" ref="departmentChart"></div>
                </div>
              </div>
            </div>
            
            <div class="right-section">
              <!-- 员工绩效排名 -->
              <div class="panel-item">
                <div class="panel-header">
                  <div class="panel-title">员工绩效排名</div>
                </div>
                <div class="panel-content">
                  <div class="chart-container" ref="employeeChart"></div>
                </div>
              </div>
              
              <!-- 客户挽回原因分布 -->
              <div class="panel-item">
                <div class="panel-header">
                  <div class="panel-title">挽回成功客户分析</div>
                </div>
                <div class="panel-content">
                  <div class="chart-container" ref="reasonChart"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bottom-section">
          <div class="panel-item">
            <div class="panel-header">
              <div class="panel-title">近期客户挽回记录</div>
            </div>
            <div class="panel-content">
              <div class="retention-table">
                <div class="table-header">
                  <div class="table-cell c1">客户ID</div>
                  <div class="table-cell c2">挽回策略</div>
                  <div class="table-cell c3">负责人员</div>
                  <div class="table-cell c4">挽回状态</div>
                  <div class="table-cell c5">挽回时间</div>
                  <div class="table-cell c6">年收益价值</div>
                </div>
                <div class="table-body">
                  <transition-group name="record-slide" tag="div" class="records-container">
                    <div v-for="item in displayedRecords" :key="item.customerId" class="table-row">
                      <div class="table-cell c1">{{ item.customerId }}</div>
                      <div class="table-cell c2">{{ item.strategy }}</div>
                      <div class="table-cell c3">{{ item.staff }}</div>
                      <div class="table-cell c4">
                        <span :class="['status', item.status === '成功' ? 'success' : item.status === '失败' ? 'fail' : 'pending']">
                          {{ item.status }}
                        </span>
                      </div>
                      <div class="table-cell c5">{{ item.date }}</div>
                      <div class="table-cell c6">{{ item.value }}</div>
                    </div>
                  </transition-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 3D动态粒子效果 -->
        <canvas class="particle-canvas" ref="particleCanvas"></canvas>
      </div>

      <div class="screen-footer">
        <div class="footer-info">
          <span class="info-item">数据统计时间: <span class="highlight">{{ dataUpdateTime }}</span></span>
          <span class="info-item">客户挽回计划完成率: <span class="highlight">78.4%</span></span>
          <span class="info-item">预计年度收益提升: <span class="highlight">¥25,768,432</span></span>
          <span class="info-item">系统版本: <span class="highlight">v2.3.5</span></span>
        </div>
      </div>
    </div>
  </FullscreenDataScreen>
</template>

<script setup name="PerformanceScreen">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { debounce } from 'lodash-es'
import FullscreenDataScreen from '@/components/layout/FullscreenDataScreen.vue'
import { FullScreen } from '@element-plus/icons-vue'

// 接收全屏模式参数
const props = defineProps({
  fullscreen: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()

// 进入全屏模式
const enterFullscreen = () => {
  // 使用重定向到全屏路由
  router.push(`/fullscreen/datascreen/performance`)
}

// 当前时间
const currentTime = ref(formatDateTime(new Date()))
let timer = null

// 数据更新时间
const dataUpdateTime = '2023-06-20 08:30:15'

// 图表DOM引用
const retentionChart = ref(null)
const departmentChart = ref(null)
const employeeChart = ref(null)
const reasonChart = ref(null)
const particleCanvas = ref(null)

// 图表实例
const charts = {
  retention: null,
  department: null,
  employee: null,
  reason: null
}

// KPI数据
const kpiData = [
  {
    title: '客户挽回率',
    value: '63.8%',
    trend: 5.2,
    icon: 'el-icon-user-solid',
    color: 'linear-gradient(135deg, #36d1dc, #5b86e5)'
  },
  {
    title: '月收入挽回',
    value: '¥2,341,586',
    trend: 8.7,
    icon: 'el-icon-money',
    color: 'linear-gradient(135deg, #11998e, #38ef7d)'
  },
  {
    title: '客户满意度',
    value: '4.7/5.0',
    trend: 3.2,
    icon: 'el-icon-star-on',
    color: 'linear-gradient(135deg, #ff9966, #ff5e62)'
  },
  {
    title: '平均响应时长',
    value: '4.8小时',
    trend: -12.5,
    icon: 'el-icon-time',
    color: 'linear-gradient(135deg, #c471ed, #f64f59)'
  },
  {
    title: '员工绩效均分',
    value: '89.6分',
    trend: 2.4,
    icon: 'el-icon-medal',
    color: 'linear-gradient(135deg, #f09819, #edde5d)'
  }
]

// 客户挽回记录
const retentionRecords = [
  {
    customerId: 'C100045387',
    strategy: '套餐升级优惠',
    staff: '张明',
    status: '成功',
    date: '2023-06-20',
    value: '¥6,540'
  },
  {
    customerId: 'C100034526',
    strategy: '专属客服跟进',
    staff: '王丽',
    status: '成功',
    date: '2023-06-19',
    value: '¥8,920'
  },
  {
    customerId: 'C100078934',
    strategy: '设备免费升级',
    staff: '李伟',
    status: '处理中',
    date: '2023-06-19',
    value: '¥4,270'
  },
  {
    customerId: 'C100023481',
    strategy: '账单折扣',
    staff: '刘芳',
    status: '成功',
    date: '2023-06-18',
    value: '¥5,180'
  },
  {
    customerId: 'C100056782',
    strategy: '增值服务赠送',
    staff: '赵强',
    status: '失败',
    date: '2023-06-18',
    value: '¥7,350'
  },
  {
    customerId: 'C100067823',
    strategy: '套餐个性化定制',
    staff: '陈静',
    status: '成功',
    date: '2023-06-17',
    value: '¥9,120'
  },
  {
    customerId: 'C100089342',
    strategy: '多设备优惠',
    staff: '黄伟',
    status: '处理中',
    date: '2023-06-17',
    value: '¥3,840'
  }
]

// 格式化日期时间
function formatDateTime(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 初始化客户挽回率趋势图表
const initRetentionChart = () => {
  if (!retentionChart.value) return null

  const chart = echarts.init(retentionChart.value)
  
  // 模拟数据 - 近12个月
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const targetData = [60, 60, 60, 60, 65, 65, 65, 65, 70, 70, 70, 70]
  const actualData = [58.2, 59.4, 61.3, 60.7, 64.5, 63.8, 66.2, 67.5, 69.3, 70.8, 71.5, 72.1]
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['实际挽回率', '目标挽回率'],
      textStyle: {
        color: '#a7c9fe'
      },
      right: 10,
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      }
    },
    yAxis: {
      type: 'value',
      name: '挽回率(%)',
      min: 50,
      max: 80,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#a7c9fe',
        formatter: '{value}%'
      },
      nameTextStyle: {
        color: '#a7c9fe'
      }
    },
    series: [
      {
        name: '实际挽回率',
        type: 'bar',
        data: actualData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5ba4ff' },
              { offset: 1, color: '#0064ff' }
            ])
          }
        }
      },
      {
        name: '目标挽回率',
        type: 'line',
        data: targetData,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#ff9f43'
        },
        lineStyle: {
          color: '#ff9f43',
          width: 3,
          type: 'dashed'
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化部门绩效对比图表
const initDepartmentChart = () => {
  if (!departmentChart.value) return null
  
  const chart = echarts.init(departmentChart.value)
  
  // 模拟数据
  const departments = ['客户服务部', '销售部', '技术支持部', '产品部', '市场部']
  const kpiData = [92, 86, 78, 83, 89]
  const actualData = [95, 82, 75, 85, 91]
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['目标分值', '实际得分'],
      textStyle: {
        color: '#a7c9fe'
      },
      right: 10,
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      }
    },
    yAxis: {
      type: 'category',
      data: departments,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      }
    },
    series: [
      {
        name: '目标分值',
        type: 'bar',
        data: kpiData,
        itemStyle: {
          color: 'rgba(120, 151, 255, 0.6)'
        }
      },
      {
        name: '实际得分',
        type: 'bar',
        data: actualData,
        itemStyle: {
          color: function(params) {
            // 红色表示未达标，绿色表示达标
            return actualData[params.dataIndex] >= kpiData[params.dataIndex] ? 
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#16c784' },
                { offset: 1, color: '#0ba360' }
              ]) : 
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#ff9a9e' },
                { offset: 1, color: '#ff5858' }
              ])
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化员工绩效排名图表
const initEmployeeChart = () => {
  if (!employeeChart.value) return null
  
  const chart = echarts.init(employeeChart.value)
  
  // 模拟数据
  const employees = [
    { name: '张明', value: 96, department: '客户服务部' },
    { name: '王丽', value: 95, department: '客户服务部' },
    { name: '李伟', value: 92, department: '销售部' },
    { name: '赵强', value: 91, department: '市场部' },
    { name: '陈静', value: 90, department: '客户服务部' },
    { name: '黄伟', value: 89, department: '技术支持部' },
    { name: '刘芳', value: 88, department: '销售部' },
    { name: '周杰', value: 87, department: '产品部' },
    { name: '林方', value: 86, department: '销售部' },
    { name: '郑洁', value: 85, department: '市场部' }
  ]
  
  const departmentColors = {
    '客户服务部': '#36d1dc',
    '销售部': '#5b86e5',
    '技术支持部': '#11998e',
    '产品部': '#ff9966',
    '市场部': '#c471ed'
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        const data = params[0].data
        return `${data.name}<br/>部门: ${data.department}<br/>绩效分: ${data.value}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      min: 80,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      }
    },
    yAxis: {
      type: 'category',
      data: employees.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      }
    },
    series: [
      {
        type: 'bar',
        data: employees.map(item => ({
          value: item.value,
          name: item.name,
          department: item.department,
          itemStyle: {
            color: departmentColors[item.department]
          }
        })),
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化挽回原因分布图表
const initReasonChart = () => {
  if (!reasonChart.value) return null
  
  const chart = echarts.init(reasonChart.value)
  
  // 模拟数据
  const data = [
    { name: '套餐升级', value: 35, selected: true },
    { name: '账单优惠', value: 28 },
    { name: '设备更新', value: 18 },
    { name: '专属客服', value: 12 },
    { name: '赠送服务', value: 7 }
  ]
  
  const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      itemWidth: 14,
      itemHeight: 14,
      textStyle: {
        color: '#a7c9fe'
      }
    },
    series: [
      {
        name: '挽回策略',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0a1023',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        labelLine: {
          show: false
        },
        data: data.map((item, index) => ({
          ...item,
          itemStyle: {
            color: colorList[index]
          }
        }))
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化粒子效果
const initParticleEffect = () => {
  if (!particleCanvas.value) return null

  const canvas = particleCanvas.value
  const ctx = canvas.getContext('2d')
  const dpr = window.devicePixelRatio || 1

  // 设置canvas尺寸
  const resizeCanvas = () => {
    if (canvas) {
      // 获取父元素的尺寸，而不是窗口尺寸
      const parentElement = canvas.parentElement
      if (parentElement) {
        const { width, height } = parentElement.getBoundingClientRect()
        canvas.style.width = `${width}px`
        canvas.style.height = `${height}px`
        canvas.width = width * dpr
        canvas.height = height * dpr
        if (ctx) {
          ctx.scale(dpr, dpr)
        }
      }
    }
  }
  
  resizeCanvas()
  
  // 定义粒子类
  class Particle {
    constructor() {
      this.reset()
    }
    
    reset() {
      const parentElement = canvas.parentElement
      const width = parentElement ? parentElement.clientWidth : window.innerWidth
      const height = parentElement ? parentElement.clientHeight : window.innerHeight
      
      this.x = Math.random() * width
      this.y = Math.random() * height
      this.size = Math.random() * 3 + 1
      this.speedX = Math.random() * 2 - 1
      this.speedY = Math.random() * 2 - 1
      this.color = `rgba(120, 151, 255, ${Math.random() * 0.3})` // 降低粒子的最大不透明度
    }
    
    update() {
      this.x += this.speedX
      this.y += this.speedY
      
      const parentElement = canvas.parentElement
      const width = parentElement ? parentElement.clientWidth : window.innerWidth
      const height = parentElement ? parentElement.clientHeight : window.innerHeight
      
      if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
        this.reset()
      }
    }
    
    draw() {
      if (ctx) {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.closePath()
        ctx.fill()
      }
    }
  }
  
  // 创建粒子 - 根据屏幕大小调整粒子数量
  const parentElement = canvas.parentElement
  const width = parentElement ? parentElement.clientWidth : window.innerWidth
  const height = parentElement ? parentElement.clientHeight : window.innerHeight
  
  // 根据屏幕面积计算合适的粒子数量
  const screenArea = width * height
  const particleCount = Math.min(Math.floor(screenArea / 8000), 150) // 限制最大粒子数量为150
  
  const particles = []
  
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle())
  }
  
  // 动画循环
  let animationId = null
  const animate = () => {
    if (!ctx || !canvas) return
    
    animationId = requestAnimationFrame(animate)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    for (const particle of particles) {
      particle.update()
      particle.draw()
    }
  }
  
  animate()
  
  // 监听窗口大小变化
  const resizeHandler = debounce(() => {
    resizeCanvas()
    // 重置粒子位置
    particles.forEach(particle => particle.reset())
  }, 200)
  
  window.addEventListener('resize', resizeHandler)
  
  // 返回清理函数
  return {
    cleanup: () => {
      window.removeEventListener('resize', resizeHandler)
      if (animationId) {
        cancelAnimationFrame(animationId)
      }
    }
  }
}

// 更新时间
const updateTime = () => {
  currentTime.value = formatDateTime(new Date())
}

// 粒子效果清理函数
let particleCleanup = null

// 屏幕自适应
const handleResize = debounce(() => {
  // 确保所有图表元素存在
  nextTick(() => {
    Object.values(charts).forEach(chart => {
      if (chart) {
        chart.resize()
      }
    })
  })
}, 200)

// 初始化所有图表
const initAllCharts = () => {
  // 延迟确保DOM已经渲染完成
  nextTick(() => {
    charts.retention = initRetentionChart()
    charts.department = initDepartmentChart()
    charts.employee = initEmployeeChart()
    charts.reason = initReasonChart()
    
    // 初始化粒子效果
    particleCleanup = initParticleEffect()
    
    // 初始调整大小以适应当前视口
    handleResize()
  })
}

// 在script部分添加自动播放逻辑
const visibleRecordsCount = 5; // 一次显示的记录数
const displayedRecords = ref([]); // 当前显示的记录
let autoplayTimer = null; // 自动播放计时器

// 初始化显示的记录
const initDisplayRecords = () => {
  displayedRecords.value = retentionRecords.slice(0, visibleRecordsCount);
}

// 更新显示的记录
const updateDisplayRecords = () => {
  const nextRecords = [...displayedRecords.value];
  
  // 移除第一条记录
  nextRecords.shift();
  
  // 添加新记录（循环获取）
  const currentLastIndex = retentionRecords.findIndex(
    record => record.customerId === displayedRecords.value[displayedRecords.value.length - 1].customerId
  );
  const nextIndex = (currentLastIndex + 1) % retentionRecords.length;
  nextRecords.push(retentionRecords[nextIndex]);
  
  // 更新显示的记录
  displayedRecords.value = nextRecords;
}

// 启动自动播放
const startAutoplay = () => {
  // 清除之前的计时器
  if (autoplayTimer) {
    clearInterval(autoplayTimer);
  }
  
  // 创建新的计时器，每4秒更新一次，给动画更多的过渡时间
  autoplayTimer = setInterval(updateDisplayRecords, 4000);
}

// 停止自动播放
const stopAutoplay = () => {
  if (autoplayTimer) {
    clearInterval(autoplayTimer);
    autoplayTimer = null;
  }
}

// 在组件挂载后初始化和启动自动播放
onMounted(() => {
  // 初始化图表
  initAllCharts()
  
  // 设置定时器
  updateTime()
  timer = setInterval(updateTime, 1000)
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
  
  // 初始化记录显示并启动自动播放
  initDisplayRecords()
  startAutoplay()
})

// 在组件卸载前清除自动播放
onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  Object.values(charts).forEach(chart => {
    if (chart) {
      chart.dispose()
    }
  })

  // 清理粒子效果
  if (particleCleanup && particleCleanup.cleanup) {
    particleCleanup.cleanup()
  }
  
  // 停止自动播放
  stopAutoplay()
})
</script>

<style lang="scss" scoped>
.performance-screen {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1a41, #111730);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between; /* 添加此属性使内容在垂直方向上分散对齐 */
}

// 粒子效果画布
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3; /* 进一步降低粒子的不透明度 */
}

// 头部样式
.screen-header {
  height: 60px;
  background: rgba(14, 22, 58, 0.8);
  border-bottom: 1px solid rgba(28, 126, 214, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 102, 255, 0.3);
  position: relative;
  z-index: 10;

  .header-left {
    display: flex;
    align-items: center;
    
    .logo {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      
      img {
        width: 100%;
        height: 100%;
      }
    }
    
    .title {
      font-size: 22px;
      font-weight: bold;
      background: linear-gradient(to right, #36d1dc, #5b86e5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px rgba(54, 209, 220, 0.5);
      display: flex; /* 让标题和返回按钮在一行 */
      align-items: center; /* 垂直居中对齐 */
      
      .back-button-placeholder {
        width: 0; /* 不占用实际空间，只用于定位 */
        height: 36px;
        display: inline-block;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          width: 80px; /* 预留返回按钮的位置 */
          height: 100%;
        }
      }
    }
  }
  
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    .time {
      font-size: 18px;
      font-weight: 500;
      color: #a7c9fe;
    }
  }
  
  .header-right {
    .fullscreen-btn {
      cursor: pointer;
      font-size: 20px;
      color: #7fdbff;
      
      &:hover {
        color: #36d1dc;
      }
    }
  }
}

// 内容区域
.screen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  position: relative;
  z-index: 5;
  min-height: calc(100vh - 96px);
  justify-content: space-between; /* 添加此属性使子元素在垂直方向上分散对齐 */
  
  @media screen and (max-height: 800px) {
    overflow-y: auto;
  }
  
  .top-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  // 顶部KPI卡片
  .top-kpi-section {
    display: flex;
    gap: 10px;
    height: 100px;
    margin-bottom: 10px;
    
    @media screen and (max-width: 1200px) {
      flex-wrap: wrap;
      height: auto;
    }
    
    .kpi-item {
      flex: 1;
      background: rgba(21, 31, 72, 0.6);
      border: 1px solid rgba(28, 126, 214, 0.3);
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 15px;
      
      @media screen and (max-width: 1200px) {
        min-width: 280px;
      }
      
      .kpi-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        margin-right: 15px;
      }
      
      .kpi-content {
        flex: 1;
        
        .kpi-title {
          font-size: 14px;
          color: #a7c9fe;
          margin-bottom: 8px;
        }
        
        .kpi-value {
          font-size: 22px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 5px;
        }
        
        .kpi-trend {
          font-size: 12px;
          
          &.up {
            color: #16c784;
          }
          
          &.down {
            color: #ff5858;
          }
          
          .trend-text {
            color: #a7c9fe;
            margin-left: 5px;
          }
        }
      }
    }
  }
  
  // 主要内容
  .main-content {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 350px;
    
    @media screen and (max-height: 800px) {
      flex-direction: column;
      height: auto;
    }
    
    .left-section, .right-section {
      width: 50%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      
      @media screen and (max-height: 800px) {
        width: 100%;
        min-height: 350px; /* 在垂直布局时确保每个部分有足够高度 */
      }
      
      .panel-item {
        height: calc(50% - 5px); /* 扣除一半的gap值 */
        min-height: 200px;
      }
    }
  }
  
  // 底部区域
  .bottom-section {
    min-height: 200px;
    height: 250px; /* 增加底部区域的高度 */
    margin-top: auto; /* 将底部区域推到底部 */
    width: 100%;
    
    @media screen and (max-height: 800px) {
      height: auto;
    }
    
    .panel-item {
      height: 100%;
      
      .panel-content {
        padding: 0; /* 移除内边距，让表格占据更多空间 */
      }
      
      // 表格样式
      .retention-table {
        width: 100%;
        height: 100%;
        
        .table-header {
          display: flex;
          font-weight: bold;
          color: #a7c9fe;
          border-bottom: 1px solid rgba(28, 126, 214, 0.4);
          padding: 10px;
          position: sticky;
          top: 0;
          background: rgba(21, 31, 72, 0.9);
          z-index: 2;
        }
        
        .table-body {
          padding: 0 10px;
          height: calc(100% - 40px);
          overflow: hidden; /* 防止溢出内容显示 */
          
          .records-container {
            height: 100%;
            position: relative;
          }
          
          .table-row {
            display: flex;
            padding: 8px 0;
            transition: all 0.5s;
            border-bottom: 1px solid rgba(28, 126, 214, 0.2);
            
            &:hover {
              background: rgba(28, 126, 214, 0.1);
            }
          }
          
          // 自动播放动画效果
          .record-slide-enter-active {
            transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); // 使用更流畅的缓动函数
          }

          .record-slide-leave-active {
            transition: all 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            position: absolute; // 使离开的元素不影响其他元素的布局
            width: 100%;
          }

          .record-slide-enter-from {
            transform: translateY(30px);
            opacity: 0;
          }
          
          .record-slide-leave-to {
            transform: translateY(-30px);
            opacity: 0;
          }
          
          // 确保其他记录平滑移动
          .record-slide-move {
            transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); // 更平滑的移动效果
          }
        }
      }
    }
  }
  
  // 面板通用样式
  .panel-item {
    background: rgba(21, 31, 72, 0.6);
    border: 1px solid rgba(28, 126, 214, 0.3);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    min-height: 180px; /* 添加最小高度确保图表可见 */
    
    .panel-header {
      height: 36px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background: rgba(18, 35, 100, 0.5);
      border-bottom: 1px solid rgba(28, 126, 214, 0.3);
      
      .panel-title {
        position: relative;
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #a7c9fe;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 16px;
          background: linear-gradient(to bottom, #36d1dc, #5b86e5);
        }
      }
    }
    
    .panel-content {
      padding: 10px;
      flex: 1;
      display: flex;
      overflow: hidden;
    }
  }
  
  // 表格样式
  .retention-table {
    width: 100%;
    height: 100%;
    
    .table-header {
      display: flex;
      font-weight: bold;
      color: #a7c9fe;
      border-bottom: 1px solid rgba(28, 126, 214, 0.4);
      padding: 10px;
      position: sticky;
      top: 0;
      background: rgba(21, 31, 72, 0.9);
      z-index: 2;
    }
    
    .table-body {
      padding: 0 10px;
      height: calc(100% - 40px);
      overflow: hidden; /* 防止溢出内容显示 */
      
      .records-container {
        height: 100%;
        position: relative;
      }
      
      .table-row {
        display: flex;
        padding: 8px 0;
        transition: all 0.5s;
        border-bottom: 1px solid rgba(28, 126, 214, 0.2);
        
        &:hover {
          background: rgba(28, 126, 214, 0.1);
        }
      }
      
      // 自动播放动画效果
      .record-slide-enter-active {
        transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); // 使用更流畅的缓动函数
      }

      .record-slide-leave-active {
        transition: all 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        position: absolute; // 使离开的元素不影响其他元素的布局
        width: 100%;
      }

      .record-slide-enter-from {
        transform: translateY(30px);
        opacity: 0;
      }
      
      .record-slide-leave-to {
        transform: translateY(-30px);
        opacity: 0;
      }
      
      // 确保其他记录平滑移动
      .record-slide-move {
        transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); // 更平滑的移动效果
      }
    }
    
    .table-cell {
      padding: 0 5px;
      display: flex;
      align-items: center;
      
      @media screen and (max-width: 1200px) {
        // 在较小屏幕上调整列宽
        &.c1 { width: 16%; }
        &.c2 { width: 22%; }
        &.c3 { width: 14%; }
        &.c4 { width: 14%; }
        &.c5 { width: 14%; }
        &.c6 { width: 20%; }
      }
      
      &.c1 { width: 15%; }
      &.c2 { width: 20%; }
      &.c3 { width: 15%; }
      &.c4 { width: 15%; }
      &.c5 { width: 15%; }
      &.c6 { width: 20%; }
    }
    
    .status {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      
      &.success {
        background: rgba(22, 199, 132, 0.2);
        color: #16c784;
        border: 1px solid rgba(22, 199, 132, 0.4);
      }
      
      &.fail {
        background: rgba(255, 88, 88, 0.2);
        color: #ff5858;
        border: 1px solid rgba(255, 88, 88, 0.4);
      }
      
      &.pending {
        background: rgba(255, 159, 67, 0.2);
        color: #ff9f43;
        border: 1px solid rgba(255, 159, 67, 0.4);
      }
    }
  }
}

// 底部区域
.screen-footer {
  height: 36px;
  background: rgba(14, 22, 58, 0.8);
  border-top: 1px solid rgba(28, 126, 214, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  
  .footer-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    
    .info-item {
      font-size: 14px;
      color: #a7c9fe;
      
      .highlight {
        color: #36d1dc;
        font-weight: bold;
        margin-left: 5px;
      }
    }
  }
}

// 图表容器通用样式
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 